<template>
  <el-card class="box-card">
      <div slot="header" style="text-align:left">
           <h3> 企业：{{appName}}</h3>
      </div>
      <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" border stripe>
        <el-table-column prop="appName" label="应用名称"  sortable width="180"></el-table-column>
        <el-table-column  prop="menus" label="资源"> 
          <template slot-scope="scope" >
                       <el-tree :ref="'tree'+scope.row.appId" 
                        :data="scope.row.menus"
                        show-checkbox
                        node-key="id">
                      </el-tree>
            </template>
        </el-table-column>
      </el-table>
         <div style="margin-top: 20px">
          <el-button @click="sub()">确定</el-button>
        </div>
  </el-card>
</template>
<script>
import {companyAppmenu,companySetAppmenu} from "@/libs/api.js";
  export default {
    data() {
      return {
        appName:"",
        tableData: [],
        editMenuVisible:false,
        menuform:{sortNum:1},
        treeData:[],
        rules: {
          name: [
            { required: true, message: '请填写资源名称', trigger: 'blur' },
             { min: 2, max: 20, message: '长度在 2 到 20个字符', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择资源类型', trigger: 'change' }
          ],
          router: [
            {  required: true, message: '请填资源路由地址', trigger: 'change' }
          ],
          url: [
            {  required: true, message: '请填资源接口地址', trigger: 'change' }
          ],
          sortNum: [
            {  required: true, message: '请填资源排序', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
 
    },
    methods:{
        //加载资源树
        loadTree(){
          if (this.$route.query.id) {
              companyAppmenu(this.$route.query.id).then(res => {
                this.tableData=res;
                this.$nextTick(function () {
                  if(this.tableData && this.tableData.length>0){
                     for(var i=0;i<this.tableData.length;i++){
                        this.check(this.tableData[i].menus);
                     }
                  }
                 })
              });
           
          }
        },
        //提交
        sub(){
            if(this.tableData && this.tableData.length>0){
              let param ={"companyId":this.$route.query.id,"menus":new Array()};
              for(var i=0;i<this.tableData.length;i++){
                let appChoosed =  this.$refs['tree'+this.tableData[i].appId].getCheckedNodes(false,true);
                param.menus.push.apply(param.menus,appChoosed);
              }
              for(var i=0;i<param.menus.length;i++){
                param.menus[i].resourceId=param.menus[i].id;
              }
              companySetAppmenu(param).then(res => {
                this.$util.success();
              });
            }
        },
      
        //递归默认选中
        check(menus){
          if(menus && menus.length>0){
            for(var i=0;i<menus.length;i++){
                if(menus[i].checked){
                  this.$refs['tree'+menus[i].appId].setChecked(menus[i].id,true,false);
                  this.check(menus[i].children);
                }
            }
          }
        }
    },
    
  mounted() {
    this.loadTree();
    if (this.$route.query.name) {
       this.appName=this.$route.query.name
    }
  },
  }
</script>
